<template>
  <div class="device">
    <div class="tab_control_box" v-show="subPage == 0">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="考勤统计" name="1">
          <CheckStatistic ref="CheckStatisticRef"></CheckStatistic>
        </el-tab-pane>
        <el-tab-pane label="考勤设置" name="2">
          <CheckList ref="CheckListRef" @modifCheck="addCheckRecord"></CheckList>
        </el-tab-pane>
        <el-tab-pane label="工资统计" name="3">
          <SalaryStatistic ref="SalaryStatisticRef"></SalaryStatistic>
        </el-tab-pane>
        <el-tab-pane label="人脸识别设备" name="4">
          <DeviceFace ref="DeviceFaceRef" @deviceInfo="addDeviceInfo"></DeviceFace>
        </el-tab-pane>
      </el-tabs>

      <div class="button_box">
        <el-row>
          <el-button type="text" icon="el-icon-refresh" plain @click="refreshListData">刷新</el-button>
          <el-button type="text" icon="el-icon-document-add" plain v-if="activeName == 2" @click="addCheckRecord(null)">添加考勤</el-button>
          <el-button type="text" icon="el-icon-document-add" plain v-if="activeName == 4" @click="addDeviceInfo">添加设备</el-button>
          <el-button type="text" icon="el-icon-document-add" plain v-if="activeName == 4" @click="syncUserInfo">同步人员信息</el-button>
        </el-row>
      </div>
    </div>

    <AddDeviceModel ref="AddDeviceModelRef" class="device_info" v-show="subPage == 1" />
    <ModifCheckModel ref="ModifCheckModelRef" />

    <div class="loading" v-show="fullscreenLoading">
      <div class="loading-warp">
        <i class="el-icon-loading"></i>
        <span class="text">同步人脸数据中...</span>
      </div>
    </div>
  </div>
</template>

<script>
import CheckList from "./check/CheckList"
import CheckStatistic from "./check/CheckStatistic"
import SalaryStatistic from "./check/SalaryStatistic"
import DeviceFace from "./check/DeviceFace"
import ModifCheckModel from '../models/ModifCheckModel'
import AddDeviceModel from "../models/AddDeviceModel"
import HttpInterface from "../../util/httpInterface";
import { messageBox } from "../../util/utils";
import { mapActions } from "vuex";

export default {
  name: "Check",
  components: {
    CheckList, SalaryStatistic, CheckStatistic, ModifCheckModel, DeviceFace, AddDeviceModel
  },
  data() {
    return {
      activeName: '1',
      subPage: 0,
      id: 0,
      fullscreenLoading: false
    };
  },

  created() {
    HttpInterface.getUserInfo(() => {
      this.refreshListData();
      this.getDutymanageList();
      this.getTendersInfo();
      this.getWorkAreaInfo();
    })
  },

  methods: {
    ...mapActions(["getDutymanageList", "getTendersInfo", "getWorkAreaInfo"]),

    handleClick() {
      this.refreshListData();
    },

    // 添加设备
    addDeviceInfo (id) {
      this.subPage = 1;
      if (typeof(id) == "number") {
        this.$refs.AddDeviceModelRef.resetDeviceData(id);
      } else {
        this.$refs.AddDeviceModelRef.resetDeviceData();
      }
    },

    addCheckRecord(id) {
      if (id) {
        this.$refs.ModifCheckModelRef.show(id);
      } else {
        this.$refs.ModifCheckModelRef.show();
      }
    },

    // 同步人员信息
    syncUserInfo() {
      let _this = this;
      let message = "确认需要同步人员信息至人脸识别设备吗？";
      messageBox(() => {
        this.fullscreenLoading = true;
        HttpInterface.requestGet(this, HttpInterface.URL_UPDATE_PERSON_DEVICE, null, function (response) {
          var { success } = response.data;
          if (success) {
            _this.successMessage("同步人脸信息成功！");
            _this.$refs.DeviceFaceRef.getDeviceFaceList();
          } else {
            _this.errorMessage("同步人脸信息失败！");
          }
          _this.fullscreenLoading = false;
        }, function () {
          _this.fullscreenLoading = false;
          _this.errorMessage("同步人脸信息失败！");
        })
      }, "warning", message)
    },

    // 刷新数据
    refreshListData () {
      switch (this.activeName) {
        case "1":
          this.$refs.CheckStatisticRef.getCheckStatisticList();
          break;
        case "2":
          this.$refs.CheckListRef.getCheckList();
          break;
        case "3":
          this.$refs.SalaryStatisticRef.getSalaryStatisticList();
          break;
        case "4":
          this.$refs.DeviceFaceRef.getDeviceFaceList();
          break;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .device_info{
    padding: 0 20px;
  }

  .loading{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2222;
    background: rgba(255, 255, 255, 0.86);

    .loading-warp{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #686868;

      .el-icon-loading{
        font-size: 30px;
      }

      .text{
        margin-left: 6px;
        margin-top: 14px;
        font-size: 14px;
      }
    }
  }
</style>
